<template>
    <div id="index">
        <!-- 背景雪花 -->
        <!--<remoteJS src="https://lzyws739307453.gitee.io/web-top-labs/WebJS/TopLabsSnow.js"></remoteJS>-->
        <vue-canvas-nest :config="config" :el="'#home'"></vue-canvas-nest>
        <div id="header" class="img tl-overflow-hidden tl-display-block tl-position-relative">
            <div style="position: relative;z-index: 1">
                <div class="tl-margin-top-80 tl-text-center tl-width-100-percent">
                    <el-avatar class="tl-spin-hover tl-text-no-select" :size="150" :src="avatar_url"></el-avatar>
                    <div class="init_title tl-font-30-px tl-color-white tl-text-shadow-small tl-text-no-select">
                        TopLabs
                    </div>
                    <Contact class="tl-margin-15-0" :placement="'bottom'"></Contact>
                </div>
                <div class="tl-text-center tl-font-30-px tl-color-white tl-text-shadow-small tl-text-no-select">
                    <div id="welcome"></div>
                    <el-divider class="tl-height-1-pt tl-width-70-percent tl-margin-24-auto"></el-divider>
                    <h5 class="init_title tl-margin-15-0 tl-font-24-px tl-color-white tl-text-shadow-small">
                        “大圣，此去欲何?”
                    </h5>
                    <h5 class="init_title tl-margin-15-0 tl-font-24-px tl-color-white tl-text-shadow-small">
                        “踏南天，碎凌霄”
                    </h5>
                    <h5 class="init_title tl-margin-15-0 tl-font-24-px tl-color-white tl-text-shadow-small">
                        “若一去不回……”
                    </h5>
                    <h5 class="init_title tl-margin-15-0 tl-font-24-px tl-color-white tl-text-shadow-small">
                        “便一去不回”
                    </h5>
                </div>
                <div class="tl-margin-top-60 tl-text-center">
                    <el-button class="tl-red-button tl-margin-0-50" @click="scrollDown('index_main', 59)"
                               icon="iconfont icon-arrow-down" round><span class="tl-margin-left-5">开始浏览</span>
                    </el-button>
                    <el-button @click="open('https://github.com/lzyws739307453', '_blank')"
                               class="tl-red-button tl-margin-0-50" icon="iconfont icon-github" round><span
                        class="tl-margin-left-5">技术博客</span>
                    </el-button>
                </div>
            </div>
        </div>
        <!--<canvas id="toplabs-Snow" width="1536" height="326"></canvas>-->
        <el-container id="index_main" class="index_main tl-padding-20 tl-overflow-hidden">
            <div class="tl-margin-0-auto tl-width-80-percent">
                <el-row>
                    <el-col class="tl-padding-15" :xs="24" :sm="12" :md="8" :lg="6" v-for="blog in blogList" :key="blog.id">
                        <div class="card tl-overflow-hidden tl-border-radius-8">
                            <div class="card_cover">
                                <a class="tl-display-block tl-overflow-hidden tl-position-absolute tl-inset-0 tl-margin-0" :href="`/web/blog/${blog.id}`" target="_blank">
                                    <img class="blog-img-1" :src="blog.firstPicture ? blog.firstPicture : 'https://th.wallhaven.cc/small/ym/ymojgd.jpg'" alt="正在加载...">
                                </a>
                                <div class="overlay"></div>
                            </div>
                            <div class="card_body">
                                <div class="card_title">
                                    <el-link :href="`/web/blog/${blog.id}`" target="_blank" :underline="false">
                                        <span class="title tl-font-16-px tl-font-weight-700">{{ blog.title }}</span>
                                    </el-link>
                                </div>
                                <div class="tl-text-no-select tl-font-12-px">
                                    <div class="card_date tl-margin-5-0">
                                        <time :datetime="blog.createTime" v-text="moment(blog.createTime).format('MMMM Do YYYY')"></time>
                                    </div>
                                    <div class="card_category">
                                        <div v-if="blog.types && blog.types.length">
                                            <el-link v-for="type in blog.types" :key="type.id" class="tl-font-10-px tl-margin-right-5" type="info">#{{ type.name }}</el-link>
                                        </div>
                                        <div v-else>未分类</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <!-- 分页  -->
                <el-pagination background class="tl-text-center"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="queryInfo.pageNum"
                               :page-size="queryInfo.pageSize"
                               :page-sizes="[12, 20, 32, 40]"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total">
                </el-pagination>
            </div>
        </el-container>
    </div>
</template>
<script>
import { scrollDown } from '@/assets/js/utils';
import Contact from '@/views/Contact';
import vueCanvasNest from 'vue-canvas-nest';
import moment from 'moment';
import { list } from '@/api/blog/blog';
import { init } from '@/assets/js/circleMagic';

export default {
    name: 'Index',
    components: { Contact, vueCanvasNest },
    data: function () {
        return {
            queryInfo: {
                pageNum: 1,
                pageSize: 12
            },
            total: 0,
            blogList: [],
            typeList: [],
            avatar_url: this.$store.state.avatar_url,
            text: `人生能有多少个十年，身边除了家人，又有多少人能陪伴你十年，一辈子很短，能坚持的事不多。我一直觉得，人活下去的动力就是期待，期待明天，期待未来，
                期待下一个十年，期待以后的生活。上一个十年就这样过去了，下一个十年会是怎样，我很想知道，那就记录下来吧！`,
            config: {
                color: '0, 0, 0',
                count: 99,
                zIndex: 0,
                opacity: 1
            }
        }
    },
    methods: {
        moment,
        scrollDown,
        async getBlogList () {
            const res = await list(this.queryInfo);
            if (!res.data.rows.length && (this.queryInfo.pageNum ^ 1)) {
                this.queryInfo.pageNum--;
                return await this.getBlogList();
            }
            this.blogList = res.data.rows;
            this.total = res.data.total;
        },
        throttle (func, args) {
            func.apply(this, args)
        },
        handleSizeChange (val) {
            this.queryInfo.pageSize = val
            this.getBlogList();
        },
        handleCurrentChange (val) {
            this.queryInfo.pageNum = val
            this.getBlogList()
        },
        open: function (url, target = '_blank') {
            window.open(url, target)
        }
    },
    created: function () {
        this.getBlogList()
    },
    mounted: function () {
        this.auto(['Welcome to my little inn, I am a star, the brightest one in the night sky.', '欢迎来到我的小客栈，我是一颗星，夜空中最亮的那颗.'], document.getElementById('welcome'))
        init('header')
        // 实际长度
        // const typeLength = this.typeList.length;
        // this.multiple(typeLength, document.getElementsByClassName('unfold-card')[0], document.getElementsByClassName('tag-more')[0]);
    }
}
</script>

<style lang="less" scoped>
#index {
    .init_title {
        font-family: 'STXingkai', serif;
    }

    .index_main {
        min-height: calc(100vh - 205px);

        .blog-img-1 {
            //width: 300px;
            //height: 200px;
            visibility: visible;
            position: absolute;
            //inset: 0px;
            box-sizing: border-box;
            padding: 0;
            border: none;
            margin: auto;
            display: block;
            width: 0;
            height: 0;
            min-width: 100%;
            max-width: 100%;
            min-height: 100%;
            max-height: 100%;
            object-fit: cover;
        }
    }
}

@keyframes caret {
    50% {
        border-right-color: transparent;
    }
}

#welcome {
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    display: inline;
    border-right: 2px solid #eee;
    animation: caret 0.5s step-end infinite;
}

//.unfold-card .el-tag {
//    box-shadow: 0 0 3px rgba(0, 225, 225, 0.3) !important;
//}

a:hover {
    .el-tag {
        text-shadow: 0 0 1px #cf1322;
        color: #cf1322 !important;
        background-color: rgb(255, 204, 199);
    }
}

.img {
    background: url("https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp") center center / cover no-repeat rgb(34, 34, 34);
    height: 100vh;
    //min-height: 755px;
}

//---------------------- 文字横线 -----------------------//
.wrap {
    position: relative;

    div {
        line-height: 20px;
        // CSS伪类用法
        &:after, &:before {
            position: absolute;
            top: 44%;
            background: #000;
            content: "";
            height: 1pt;
            width: 30%;
        }

        // 调整背景横线的左右距离
        &:before {
            left: 0;
        }

        &:after {
            right: 0;
        }
    }
}

.card {
    background-color: #FFFFFF;
    border-radius: 6px;
    box-shadow: rgb(2 10 18 / 10%) 0 5px 40px -1px;
    //border: #C8C8C8 solid 2px;
    transition: top 500ms, box-shadow 500ms; /* 过渡动画 */
    top: 0;
    position: relative;

    ::v-deep * {
        font-family: 'Monaco', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
    }

    //&:hover {
    //    top: -10px;
    //    position: relative;
    //    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .3) !important;
    //    box-shadow: 0 0 15px rgba(0, 0, 0, .3) !important;
    //    //-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5) !important;
    //    //box-shadow: 0 0 20px rgba(0, 0, 0, .5) !important;
    //}

    .card_cover {
        height: 150px;
        position: relative;
        transition: all 0.45s ease-in-out 0s;
        cursor: pointer;

        &:hover {
            img {
                transform: scale(1.05);
            }

            .overlay {
                opacity: 0.5;
            }
        }

        img {
            //border-radius: 6px 6px 0 0;
            transition: all 0.45s ease-in-out 0s;
            transform-origin: center center;
        }

        .overlay {
            //border-radius: 6px 6px 0px 0px;
            position: absolute;
            inset: 0;
            background-color: rgba(22, 29, 39, 0.66);
            opacity: 0;
            transition: opacity 0.3s ease-in-out 0s;
        }
    }

    .card_body {
        padding: 12px 14px;

        .card_title {
            a {
                display: block;
                -webkit-text-decoration: none;
                text-decoration: none;
                //color: #161e27;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
